<!-- 新增/修改弹框 -->
<template>
  <!-- 新增/修改弹窗 -->
  <el-dialog
    v-model="dialogDetail.visible"
    :width="900"
    :title="dialogDetail.title"
    draggable
    close-icon="CloseBold"
    @close="closeDialog(false)"
  >
    <el-descriptions :column="2">
      <el-descriptions-item label="项目名称">{{ formData.projectName }}</el-descriptions-item>
      <el-descriptions-item label="项目编号">{{ formData.projectNum }}</el-descriptions-item>
      <el-descriptions-item label="账户名称">{{ formData.accountName }}</el-descriptions-item>
      <el-descriptions-item label="流水号">{{ formData.serialNumber }}</el-descriptions-item>
      <el-descriptions-item label="银行账号">{{ formData.bankNo }}</el-descriptions-item>
      <el-descriptions-item label="银行流水号">{{ formData.bankSerialNumber }}</el-descriptions-item>
      <el-descriptions-item label="收支类型">
        <el-tag v-if="formData.incomeType == 1">{{ formData.incomeTypeName }}</el-tag>
        <el-tag v-if="formData.incomeType == 2" type="warning">{{ formData.incomeTypeName }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="交易币种">
        <el-tag>{{ formData.tradeCurrency }}</el-tag>
      </el-descriptions-item>
      <!-- <el-descriptions-item label="交易类型"
        ><el-tag>{{ formData.tradeTypeName }}</el-tag>
      </el-descriptions-item> -->
      <el-descriptions-item label="收支金额">{{ formData.amount }} </el-descriptions-item>
      <el-descriptions-item label="余额">{{ formData.balance }} </el-descriptions-item>
      <el-descriptions-item label="交易摘要">{{ formData.tradAbstract }} </el-descriptions-item>
      <el-descriptions-item label="交易备注">{{ formData.tradRemarks }} </el-descriptions-item>
      <el-descriptions-item label="收支日期">{{ formData.incomeDate }} </el-descriptions-item>
      <el-descriptions-item label="创建日期">{{ formData.createTime }} </el-descriptions-item>
    </el-descriptions>
  </el-dialog>
</template>

<script lang="ts" setup>
import { GetProjectSpecialAccountPayment } from "@/api/specialaccount/index";

const props = defineProps({
  dialogDetail: {
    type: Object,
    default: () => ({
      visible: false,
      title: "详情",
      id: 0,
    }),
  },
});

const { dialogDetail } = toRefs(props);

const emit = defineEmits(["sendClose"]);

const loading = ref(false);
const formData = reactive<any>({});

onMounted(() => {
  if (dialogDetail.value.visible) {
    loading.value = true;
    GetProjectSpecialAccountPayment(dialogDetail.value.id)
      .then((res) => {
        if (res.type == 0) {
          if (res.success) {
            Object.assign(formData, res.data);
          } else {
          }
        } else {
        }
      })
      .finally(() => {
        loading.value = false;
      });
  }
});

/**
 * 关闭弹窗
 */
function closeDialog(query: boolean) {
  emit("sendClose", query);
}
</script>

<style lang="scss" scoped>
.d_left {
  margin-left: 10px;
}
:deep(.el-form-item) {
  flex-wrap: wrap;
}

:deep(.el-input) {
  width: 80%;
}

:deep(.el-select) {
  width: 100%;
}

:deep(.el-input__wrapper) {
  width: 100%;
}

:deep(.el-form-item__label) {
  color: #696868;
  font-size: 13px;
}
</style>
